<template>
    <div class="stepperBox" :class="{['stepperBox'+styleType]:styleType}">
        <button :disabled="min?(num<=min?true:false):false" class="stepperBtn" @click.stop="decreace">-</button>
        <div class="stepperInput">
            <input type="number" v-model="num" @input="getInputVal" :readonly="readonly"/>
        </div>
        <button :disabled="max?(num>=max?true:false):false" class="stepperBtn add" @click.stop="increace">+</button>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
export default {
    props:{
        modelValue:'',
        readonly:{
            type:Boolean,
            default:false
        },
        number:{ // 每次加减的值，默认为每次加减1
            type:Number,
            default:1
        },
        min:{ // 最小值
            type:Number
        },
        max:{ // 最大值
            type:Number
        },
        styleType:Number
    },
    components:{
        
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            num:props.modelValue || 1
        })

        const getInputVal = (e)=>{
            context.emit('update:modelValue', e.target.value)
        }

        const increace = ()=>{
            let total = state.num + props.number
            if(total>props.max){
                total = props.max
            }
            state.num = total
            context.emit('update:modelValue', total)
        }

        const decreace = ()=>{
            let total = state.num - props.number
            if(total<props.min){
                total = props.min
            }
            state.num = total
            context.emit('update:modelValue', total)
        }

        return{
            ...toRefs(state),
            getInputVal,
            increace,
            decreace
        }
    }
}
</script>

<style lang="scss" scoped>
    .stepperBox{
        display: flex;
        height: 60px;
        width: 100%;
        align-items: center;
        &.stepperBox2{
            height: 80px;
            .stepperBtn{
                display: flex;
                line-height: normal;
                align-items: center;
                justify-content: center;
                width: 80px;
            }
            .stepperInput{
                input{
                    line-height: normal;
                    font-size: 32px;
                }
            }
        }
        .stepperInput{
            display: block;
            flex: 1;
            height: 100%;
            background: rgba(103,248,255,0.2000);
            border: 1px solid rgba(103,248,255,0.5000);
            margin: 0 15px;
            input{
                width: 100%;
                height: 100%;
                border: 0;
                background: none;
                text-align: center;
                font-size: 32px;
                line-height: 60px;
                font-weight: 500;
                color: #fff;
            }
        }
        .stepperBtn{
            display: block;
            width: 60px;
            height: 100%;
            text-align: center;
            line-height: 60px;
            background: rgba(103,248,255,0.2000);
            border: 1px solid rgba(103,248,255,0.5000);
            border: 0;
            overflow: hidden;
            opacity: 1;
            flex-shrink:0;
            font-size: 50px;
            &:disabled{
                opacity: 0.5;
            }
        }
    }
</style>